<template>
	<view class="x-goods-detail" :style="{'padding-bottom': bottomOffset+'px'}">
		<template v-if="theme && theme.content">
			<view v-for="(pageItem, pageIndex) in themeContent.pages" :key="pageIndex">
				<block v-for="(groupItem, groupIndex) in pageItem.groups" :key="groupIndex">
					<block v-if="groupItem.resGroups[groupItem.type].type==0">
						<image class="img" mode="widthFix" :src="imageApi+groupItem.resGroups[groupItem.type].res"
							@load="(e)=>onLoadedImage(e, pageIndex+'_'+groupIndex)"></image>
					</block>
					<block v-else-if="groupItem.resGroups[groupItem.type].type==1">
						<x-horizontal-images-scroll
							@loadedImages="(ret)=>onLoadedImages(ret.height, pageIndex+'_'+groupIndex)"
							:imgs="groupItem.resGroups[groupItem.type].res"
							:bgImg="groupItem.resGroups[groupItem.type].backgroundImage ? groupItem.resGroups[groupItem.type].backgroundImage : ''"
							:frontImg="groupItem.resGroups[groupItem.type].frontImage ? groupItem.resGroups[groupItem.type].frontImage : ''"></x-horizontal-images-scroll>
					</block>
					<block v-else-if="groupItem.resGroups[groupItem.type].type==2">
						<video :id="index + '-' + subIndex + '-video'" class="video" :loop="false" object-fit="fill"
							:style="'height:'+videoHeight+'px;'"
							@loadedmetadata="(e)=>onLoadedVideo(e, pageIndex+'_'+groupIndex)"
							:enable-play-gesture="true" :show-fullscreen-btn="false" :show-bottom-progress="false"
							:show-progress="true" :show-play-btn="true" :show-mute-btn="true" :muted="true"
							:src="imageApi+groupItem.resGroups[groupItem.type].res"></video>
					</block>
				</block>
			</view>
		</template>

		<template v-else>
			<u-empty mode="list" text="暂无数据"></u-empty>
		</template>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import XHorizontalImagesScroll from '@/components/horizontalImageScroll/xHorizontalImagesScroll.vue'
	import Config from '@/config/index.js'
	export default {
		components: {
			XHorizontalImagesScroll,
		},
		computed: {
			...mapState(['device']),
			themeContent() {
				return this.theme && this.theme.content ? this.theme.content : null
			},
		},
		props: {
			bottomOffset: Number,
		},
		data() {
			return {
				id: '',
				// contentHeight: 150, //TODO

				imageApi: Config.imageUrl,
				theme: null,

				currentPageIndex: 0,
				videoHeight: 200,

				contentHeights: 0,
			}
		},
		methods: {
			loadData(data) {
				console.log("xGoodsDetail data=", data)
				this.theme = data
			},
			onMore() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//显示海报
			onGeneratePoster() {
				this.openShare = true
				this.$nextTick(() => {
					// canvas操作
					this.$refs.poster.showCanvas()
				})

			},
			emitCloseShare() {
				this.openShare = false
			},

			onLoadedVideo(e, key) {
				this.videoHeight = e.detail.height / e.detail.width * this.device.screenWidth

				// this.elementHeights[key] = this.videoHeight

				this.contentHeights += this.videoHeight
				console.log("##videoHeight=", this.videoHeight, "ch=", this.contentHeights)
			},

			onLoadedImage(e, key) {
				//获取屏幕宽度
				var width = this.device.screenWidth
				//获取图片实际高度
				var imgheight = e.detail.height
				//获取图片实际宽度
				var imgwidth = e.detail.width
				//计算等比swiper高度
				var height = width * imgheight / imgwidth
				// this.elementHeights[key] = height
				this.contentHeights += height
				console.log("##imageHeight=", height, "ch=", this.contentHeights)
			},

			onLoadedImages(height, key) {
				// this.elementHeights[key] = height
				this.contentHeights += height
				console.log("##imagesHeight=", height, "ch=", this.contentHeights)
			},



			onChange(e) {
				let {
					current,
					source
				} = e.detail
				this.currentPageIndex = current
			},
			videoPause(videoId) {
				var videoContext = wx.createVideoContext(videoId)
				console.log("videoContext=", videoContext, ",videoId=", videoId)
				videoContext.pause()
			},
			videoPlay(videoId) {
				var videoContext = wx.createVideoContext(videoId)
				videoContext.play()
			},

			onVideoLoaded(e) {
				let videoHeight = e.detail.height / e.detail.width * this.device.screenWidth
				this.videoHeight = videoHeight
				this.videoWHScale = e.detail.height / e.detail.width
			},
		},
	}
</script>

<style lang="less" scoped>
	.more {
		position: fixed;
		z-index: 1;
		bottom: 260rpx;
		right: 0rpx;
		width: 40rpx;
		height: 180rpx;
		background: rgba(33, 33, 33, 0.7);
		line-height: 0rpx;
		-webkit-writing-mode: tb-rl;
		writing-mode: tb-rl;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		color: #AAA;
		font-size: 15px;
	}

	.generate-poster {
		position: fixed;
		z-index: 1;
		bottom: 40rpx;
		right: 0rpx;
		width: 40rpx;
		height: 180rpx;
		background: rgba(33, 33, 33, 0.7);
		line-height: 0rpx;
		-webkit-writing-mode: tb-rl;
		writing-mode: tb-rl;
		border-bottom-left-radius: 5px;
		border-top-left-radius: 5px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		color: #AAA;
		font-size: 15px;
	}

	.video {
		/* aspect-ratio: 9 / 16;  */
		width: 100%;
		/* height: auto;  */
	}

	.img {
		width: 100%;
		vertical-align: top;
		margin-top: -1px;
		border: 0;
		vertical-align: bottom;
	}

	/* 去除视频与图片之间的间隔 */
	.img,
	.video {
		border: 0;
		vertical-align: bottom;
	}

	.indicator-arrow {
		position: absolute;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		width: 20px;
		height: 10px;
		z-index: 999;
	}

	.text-style {
		z-index: 100;
		left: 12%;
		/* background: red; */
		position: absolute;
		opacity: 0;
		color: white;
	}

	.poster {
		position: fixed;
		right: 0px;
		bottom: 50px;
		width: 100px;
		height: 50px;
		color: #666;
		// border: 1px solid #333;
		z-index: 999;
	}
</style>